/**
 * 在modal中显示gallery，可拖拽放大缩小
 */
import React, { Component } from 'react';
import {
  Dimensions,
} from 'react-native';
import PropTypes from 'prop-types';
import Carousel from 'react-native-looped-carousel';
import TimerEnhance from 'react-native-smart-timer-enhance';
import PhotoView from 'react-native-photo-view';

const SCREEN_SIZE = Dimensions.get('window');

@TimerEnhance
class Gallery extends Component {

  render() {
    const {
      currentPage,  // image index you click, begin from 0
      displayData,  // images array to display
      onClose,
      photoViewProps,
      ...props
    } = this.props;
    return (
      <Carousel
        ref={ref => { this._Carousel = ref; }}
        style={{ width: SCREEN_SIZE.width, height: SCREEN_SIZE.height }}
        currentPage={currentPage}
        autoplay={false}
        pageInfo
        {...props}>
        {displayData.map((v, i) => {
          return (
            <PhotoView
              key={i}
              scale={4}
              source={{ uri: v }}
              minimumZoomScale={1}
              maximumZoomScale={5}
              androidScaleType="fitCenter"
              onTap={onClose}
              {...photoViewProps}
              style={[{ width: SCREEN_SIZE.width, height: SCREEN_SIZE.height }, photoViewProps.style && photoViewProps.style]} />
          );
        })}
      </Carousel>
    );
  }
}

Gallery.propTypes = {
  currentPage: PropTypes.number,
  displayData: PropTypes.arrayOf(PropTypes.string),
  onClose: PropTypes.func,
  scrollTo: PropTypes.object,
  photoViewProps: PropTypes.any,
};
Gallery.defaultProps = {
  currentPage: 0,
  displayData: [],
  onClose: () => {},
  scrollTo: {
    index: 1,
    time: 250,
  },
  photoViewProps: {},
};

export default Gallery;
